<template>
    <div class="Titlediv1" :style="LetTop">
        <div class="spandiv2">
            <span class="span1" :style="Choose==0?'font-weight:900':''"
            @click="choose(0)">
                点餐</span>
            <span class="span11" v-show="Choose==0"></span>
            <span class="span1" :style="Choose==1?'font-weight:900;margin-left:40px':'margin-left:40px'"
            @click="choose(1)">
                评价</span><span class="span12">5.0</span>
            <span class="span11" style="margin-left: 92px;" v-show="Choose==1"></span>
            <span class="span1" :style="Choose==2?'font-weight:900;margin-left:40px':'margin-left:40px'"
            @click="choose(2)">
                商家</span><span class="span12">食安</span>
            <span class="span11" style="margin-left: 177px;" v-show="Choose==2"></span>
        </div>
    </div>
</template>

<script>
export default {
    name:'PxTTTitle',
    data(){
        return{
            Choose:0,
            scroll:0,
            LetTop:'',
        }
    },
    methods:{
        choose(value){
            this.Choose=value
            this.$bus.$emit('Choosevalue',value)
        }
    },
    watch:{
        scroll(value){
            if(value >= 169){
                this.LetTop='position: fixed;top: 0px;background-color: rgb(250, 250, 250);'
            }else{
                this.LetTop=''
            }
        }
    },
    mounted(){
        this.$bus.$on('scroll',(value)=>{
            this.scroll=value
        })
    },
    beforeDestroy(){
        this.$bus.$off('scroll')
    }
}
</script>

<style scoped>
.Titlediv1{
    padding-top: 15px;
    font-size: 15px;
    background-color: white;
    width: 100%;
    height: 35px;
    z-index: 2;
}
.spandiv2{
    margin-left: 15px;
}
.span1{
    padding-right: 5px;
    padding-left: 5px;
    padding-bottom: 5px;
}
.span11{
    border-radius: 10px;
    margin-top: 5px;
    margin-left: 10px;
    display: block;
    width: 20px;
    position: absolute;
    border-bottom: 3px solid rgb(24, 170, 255);
}
.span12{
    color: rgb(136, 136, 136);
    position: absolute;
    font-size: 11px;
    margin-top: -4px;
    margin-left: -3px;
}
</style>